<template>
  <div class="pro-container" @scroll="scrollPage">
    <div class="top-msg-box flex-box" :style="{background: 'rgba(255, 255, 255,'+ topOpacity +')'}">
      <div class="back" :style="{background: 'rgba(0, 0, 0,'+ 0.6*(1-topOpacity) +')'}" @click="back">
        <i class="icon icon-back" :style="{color: topOpacity===0?'#fff':'#000'}"></i>
      </div>
      <p :style="{opacity: topOpacity}">{{productAc.name | setTitle}}</p>
      <div class="share flex-box" :style="{background: 'rgba(126, 126, 126,'+ (1-topOpacity) +')'}">
        <span :style="{background: topOpacity===0?'#fff':'#666'}"></span>
        <span :style="{background: topOpacity===0?'#fff':'#666'}"></span>
        <span :style="{background: topOpacity===0?'#fff':'#666'}"></span>
      </div>
      <div class="bottom-line" :style="{opacity: topOpacity}"></div>
    </div>
    <div class="pro-img">
      <div class="img-box flex-box">
        <swiper :options="swiperOptionImg" ref="swiperImg" v-if="productAc.imgs">
          <swiper-slide class="flex-box" v-for="(item,index) in productAc.imgs" :key = "index">
            <img :src="$BASEPATH + item.path" alt="">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <div class="active-msg" v-if="productAc.buyType!='4'&&productAc.mineName">
        <p>{{productAc.mineName}}</p>
      </div>
    </div>
    <div class="pro-title">
      <h2>{{productAc.name}}</h2>
      <p v-if="productAc.prodDesc">{{productAc.prodDesc}}</p>
      <div class="price">
        <div class="left">
          <h3 v-if="productAc.creditFlag=='1'"><span>Ⓕ</span> {{productAc.price*100}} <i>积分</i></h3>
          <h3 v-else><span>￥</span>{{productAc.priceFlag == '1'? productAc.price :'????'}}</h3>
          <p v-if="productAc.marketPrice">原价：￥<span>{{productAc.marketPrice}}</span></p>
        </div>
        <div class="right">
          <p v-if="productAc.stock">库存：{{productAc.stock}}</p>
        </div>
      </div>
    </div>
    <div class="pro-msg">
      <ul>
        <li v-if="productAc.promotion">
          <p class="msg-name">促销信息 :</p>
          <div class="cuxiao-box" v-if="productAc.promotion.credits">
            <div class="cuxiao-main">
              <p class="cuxiao-title">赠送积分<span>{{productAc.promotion.credits}}</span></p>
            </div>
            <div class="cuxiao-main" v-if="productAc.promotion.coupons">
              <p class="cuxiao-title quan-title">赠券<span><img src="../assets/img/quan.png"></span></p>
              <p class="cuxiao-desc quan-desc" v-html="cuxiaoQuan"></p>
            </div>
            <div class="cuxiao-main" v-if="productAc.promotion.promotions">
              <p class="cuxiao-title cuxiaoa-title ">促销<span><img src="../assets/img/cuxiao.png"></span></p>
              <p class="cuxiao-desc quan-desc" v-html="cuxiaoDesc"></p>
            </div>
          </div>
        </li>
        <li v-if="productAc.buyMethodFlag==1">
          <p class="msg-name">购买方式 :</p>
          <div class="pay-path">
            <p>{{productAc.buyMethods}}</p>
          </div>
        </li>

        <li v-if="productAc.supplierFlag==1">
          <p class="msg-name">供&nbsp;&nbsp;应&nbsp;&nbsp;商 :</p>
          <div class="pay-path">
            <p>{{productAc.supplierName}}</p>
          </div>
        </li>
        <li v-if="productAc.saleFlag==1">
          <p class="msg-name">{{saleName}} :</p>
          <div class="pay-path">
            <p v-if="productAc.saleState=='0'">{{saleStart}}</p><p v-if="productAc.saleState=='1'">{{saleEnd}}</p>
          </div>
        </li>
        <li v-if="productAc.payMethodFlag==1">
          <p class="msg-name">支付方式 :</p>
          <div class="pay-path">
            <p :class="item.style"  v-for="(item,index) in payMethods" :key="index">{{item.name}}</p>
          </div>
        </li>
        <li>
          <p class="msg-name">选择产品 :</p>
          <div class="msg-main">
            <p class="msg-lists">{{productAc.name}}</p>
          </div>
          <div class="link-more flex-box" v-if="productAc.attrFlag=='1'" @click="cartCheckShow=!cartCheckShow">
            <span class="norem"></span><span class="norem"></span><span class="norem"></span>
          </div>
        </li>
        <li v-if="productAc.parameterValues">
          <p class="msg-name">产品信息 :</p>
          <div class="msg-main">
            <p class="msg-lists">{{productAcKeys}}</p>
          </div>
          <div class="link-more flex-box" @click="proDetailShow=!proDetailShow">
            <span class="norem"></span><span class="norem"></span><span class="norem"></span>
          </div>
        </li>
      </ul>
    </div>
    <div class="pro-service">
      <ul>
        <li>
          <p class="msg-name">联系我们 :</p>
          <p class="service-name">0755-36307202</p>
        </li>
        <li v-for="(item,index) in productAcMsgImportent" :key="index">
          <p class="msg-name">{{item.name}} :</p>
          <p class="service-name red" v-html="item.val"></p>
        </li>
      </ul>
    </div>
    <div class="pro-detail">
      <div class="pro-detail-title">
        <h4>产品详情</h4>
      </div>
      <div class="pro-detail-content" v-if="productAc.proContent" v-html="productAc.proContent"></div>
      <div class="pro-detail-content">
        <img src="../assets/img/yjg-001.jpg">
        <img src="../assets/img/yjg-002.jpg">
        <img src="../assets/img/yjg-003.jpg">
        <img src="../assets/img/yjg-004.jpg">
        <img src="../assets/img/yjg-005.jpg">
        <img src="../assets/img/yjg-006.jpg">
        <img src="../assets/img/yjg-007.jpg">
        <img src="../assets/img/yjg-008.jpg">
        <img src="../assets/img/yjg-009.jpg">
      </div>
    </div>
    <proFooter :carBtnState="carBtnState" :buyBtnState="productAc.buyFlag" :buyBtnVal="buyBtnVal"></proFooter>
    <mallProMsg :proMSG = productAcMsg v-show="proDetailShow"></mallProMsg>
    <mallProMsg :carBtnState="carBtnState" :goodsInfo = goodsData :productSpecs = productSpecs :btnAddCart = true v-show="cartCheckShow"></mallProMsg>
    <mallProMsg :goodsInfo = goodsData :buyBtnState="productAc.buyFlag"  :productSpecs = productSpecs :btnBuyNow = true v-show="buyCheckShow"></mallProMsg>
  </div>
</template>
<script>
// @ is an alias to /src
import mallProMsg from '@/components/mall_promsg.vue'
import proFooter from '@/components/pro_footer.vue'
export default {
  name: 'mallIndex',
  data() {
    return {
      buyCheckShow: false,
      cartCheckShow: false,
      lists: [1, 2, 3, 4, 5],
      payMethods: '',
      product: '',
      productAc: '',
      productAcMsg: [],
      productAcKeys: '',
      productAcMsgImportent: [],
      proDetailShow: false,
      productSpecs: '',
      promotion: {
        coupons: '华大水产-2元 现金券x3,限额-10元 现金券x1',
        credits: 222,
        id: '40C1AEEDFFFC57DCE050A8C0A3E16920',
        name: '[员工专享]华小米100千克',
        promotions: '[员工专享]华小米100千克-20元 现金'
      },
      goodsData: {},
      topOpacity: 0,
      swiperOptionImg: {
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  components: {
    mallProMsg,
    proFooter
  },
  filters: {
    setTitle: function(val) {
      if (!val) {
        return ''
      } else {
        return val.replace('[员工专享]', '')
      }
    }
  },
  computed: {
    saleName() {
      let saleName
      switch (this.productAc.saleState) {
        case '0':
          saleName = '上架时间'
          break
        case '1':
          saleName = '下架时间'
          break
        case '2':
          saleName = '即将上架'
          break
      }
      return saleName
    },
    carBtnState() {
      let state
      if (this.productAc.creditFlag == '1') {
        state = 0 // 不显示加入购物车按钮
      } else if (this.productAc.creditFlag == '0' && !this.productAc.buyFlag) {
        state = 1 // 加入购物车按钮显示灰色
      } else if (
        (this.productAc.addCartFlag == '1' &&
          this.productAc.buyFlag &&
          this.productAc.creditFlag != '1') ||
        (this.productAc.addCartFlag == '1' &&
          !this.productAc.buyFlag &&
          this.productAc.saleState == '2' &&
          this.productAc.creditFlag != '1')
      ) {
        state = 2 // 正常显示加入购物车
      } else {
        state = 3 // 未知状态
      }
      return state
    },
    buyBtnVal() {
      let state
      if (this.productAc.buyFlag) {
        if (
          this.productAc.creditFlag == '1' &&
          this.productAc.isLogin &&
          this.productAc.creditAmount - this.productAc.price * 100 < 0
        ) {
          state = '积分不足'
        } else {
          if (this.productAc.buyType == '1') {
            state = '团购'
          }
          if (this.productAc.buyType == '2') {
            if (this.productAc.creditFlag == '1') {
              state = '预约兑换'
            } else {
              state = '预约购买'
            }
          }
          if (this.productAc.buyType == '3') {
            if (this.productAc.creditFlag == '1') {
              state = '立即兑换'
            } else {
              state = '立即购买'
            }
          }
          if (this.productAc.buyType == '4') {
            state = '即将上市'
          }
          if (this.productAc.buyType == '6') {
            state = '报名申请'
          }
        }
      } else {
        if (this.productAc.saleState == '1') {
          state = '产品已下架'
        }
        if (this.productAc.saleState == '2') {
          state = '即将上架'
        } //即将上架，倒计时效果
        if (this.productAc.saleState == '0') {
          if (this.productAc.buyType == '1') {
            state = '团购'
          }
          if (this.productAc.buyType == '2') {
            if (this.productAc.creditFlag == '1') {
              state = '预约兑换'
            } else {
              state = '预约购买'
            }
          }
          if (this.productAc.buyType == '3') {
            if (this.productAc.creditFlag == '1') {
              state = '立即兑换'
            } else {
              state = '立即购买'
            }
          }
          if (this.productAc.buyType == '4') {
            state = '即将上市'
          }
          if (this.productAc.buyType == '5') {
            state = '企业专享'
          }
          if (this.productAc.buyType == '6') {
            state = '报名申请'
          } //报名申请
        }
      }
      return state
    },
    saleStart() {
      return this.getLocalTime(this.productAc.saleStartTime)
    },
    saleEnd() {
      return this.getLocalTime(this.productAc.saleEndTime)
    },
    swiperImg() {
      return this.$refs.swiperImg.swiper
    },
    cuxiaoDesc() {
      return this.productAc.promotion.promotions.replace(/,|，/, '<br>')
    },
    cuxiaoQuan() {
      return this.productAc.promotion.coupons.replace(/,|，/, '<br>')
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    // 时间戳转时间
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    scrollPage(e) {
      let scroll = e.target.scrollTop < 60 ? 60 : e.target.scrollTop
      this.topOpacity = (scroll - 60) / 50
    },
    getProductDetail(id) {
      this.$API
        .getProductDetail({ aid: id })
        .then(data => {
          // 处理产品信息
          console.log(data)
          this.goodsData = {
            id: '',
            allbusinessId: data.data.id,
            name: data.data.name,
            img: data.data.imgs ? data.data.imgs[0].path : '',
            accessPath: data.data.accessPath,
            amountFlag: data.data.amountFlag,
            price: data.data.price,
            buyFlag: data.data.buyFlag,
            couponId: '',
            selectStatus: '1',
            promotionPrice: '0',
            allbusinessFailureState: '1',
            allbusinessStore: data.data.stock,
            ecCoupons: []
          }
          console.log(this.goodsData)
          this.productAc = data.data
          let msgCur = [],
            msgKeys = [],
            msgImprotent = [],
            payMethodsAc = []
          data.data.parameterValues.forEach(item => {
            // 产品标红信息
            if (
              item.parameterValue.indexOf('red') > -1 ||
              item.ecParameter.name == '注意事项' ||
              item.ecParameter.name == '自提时间'
            ) {
              msgImprotent.push({
                name: item.ecParameter.name,
                val: item.parameterValue
              })
            } else {
              msgCur.push({
                name: item.ecParameter.name,
                val: item.parameterValue
              })
              msgKeys.push(item.ecParameter.name)
            }
          })
          // 支付方式
          if (data.data.payMethodFlag == 1) {
            data.data.payMethods.split(',').forEach(item => {
              if (item.indexOf('微信') > -1) {
                payMethodsAc.push({
                  style: 'pay-1',
                  name: item
                })
              } else if (item.indexOf('支付宝') > -1) {
                payMethodsAc.push({
                  style: 'pay-2',
                  name: item
                })
              } else if (item.indexOf('华大币') > -1) {
                payMethodsAc.push({
                  style: 'pay-3',
                  name: item
                })
              } else if (item.indexOf('现金') > -1) {
                payMethodsAc.push({
                  style: 'pay-4',
                  name: item
                })
              } else if (item.indexOf('饭卡') > -1) {
                payMethodsAc.push({
                  style: 'pay-5',
                  name: item
                })
              } else {
                payMethodsAc.push({
                  style: 'pay-0',
                  name: item
                })
              }
            })
          }
          this.productAcMsg = msgCur //产品信息
          this.productAcKeys = msgKeys.join(' ') //产品信息属性名
          this.productAcMsgImportent = msgImprotent //标红产品属性
          this.payMethods = payMethodsAc //支付方式处理
          // console.log(this.payMethods)
          // 如果有产品规格则获取产品规格
          if (data.data.attrFlag == '1') {
            this.$API.getProductGroup({ aid: id }).then(data => {
              // console.log(data.data[0])
              this.productSpecs = data.data[0]
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  beforeRouteLeave(to, from, next) {
    if (!this.cartCheckShow && !this.proDetailShow && !this.buyCheckShow) {
      next()
    } else {
      this.proDetailShow = false
      this.cartCheckShow = false
      this.buyCheckShow = false
      next(false)
    }
  },
  created() {
    // this.$axios
    //   .get('/data/products-detail.json')
    //   .then(data => {
    //     // console.log(data)
    //     this.product = data.data.result[0]
    //     this.goodsData.id = data.data.result[0].id
    //     this.goodsData.img = data.data.result[0].proImg[0]
    //     this.goodsData.name = data.data.result[0].title
    //     this.goodsData.describe = data.data.result[0].describe
    //     this.goodsData.priceN = data.data.result[0].priceN
    //     this.goodsData.priceP = data.data.result[0].priceP
    //     // console.log(this.product)
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
    console.log(this.$route)
    this.getProductDetail(this.$route.params.id)
    this.$bus.$on('selectCurGoods', path => {
      this.getProductDetail(path.split('/')[1])
    })
    this.$bus.$on('closeProMsg', data => {
      this.proDetailShow = data
      this.cartCheckShow = data
      this.buyCheckShow = data
    })
    this.$bus.$on('selectProAc', () => {
      this.productAc = ''
    })
    this.$bus.$on('cartBox', data => {
      this.cartCheckShow = data
    })
    this.$bus.$on('broughtBox', data => {
      this.buyCheckShow = data
    })
  },
  mounted() {
    // console.log(this.$route.params.id)
    // this.goodsData.id = this.$route.params.id
    let _self = this
    $('#slide-box-top').scroll(function() {
      // console.log('uyiu')
      let scroll = this.scrollTop < 60 ? 60 : this.scrollTop
      _self.topOpacity = (scroll - 60) / 50
    })
  }
}
</script>
<style lang="scss">
.pro-container {
  .pro-img {
    .swiper-pagination-bullet-active {
      background: #fff;
    }
  }
}
</style>
<style lang="scss" scoped>
.pro-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 46px;
  box-sizing: border-box;
  background: #fff;
  .swiper-box {
    width: 100%;
    height: 100%;
    // & > .swiper-wrapper > .swiper-slide {
    //   height: auto;
    // }
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    .slide-box {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
    .slide-box-main {
      padding-top: r(47);
      box-sizing: border-box;
    }
  }
  .top-msg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    z-index: 9999;
    background: #fff;
    justify-content: space-between;
    p {
      font-size: 16px;
      color: #666;
    }
    .back,
    .share {
      width: 25px;
      height: 25px;
      border-radius: 30px;
      z-index: 66;
      transform: rotate(180deg);
      .icon-back {
        font-family: 'iconfont-gb' !important;
        font-size: 23px;
        line-height: 24px;
        font-style: normal;
        position: relative;
        top: 2px;
        left: 1px;
        color: #fff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        &::before {
          content: '\e616';
        }
      }
    }
    .share {
      left: auto;
      right: 12px;
      span {
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 100%;
        margin-right: 2px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .bottom-line {
      width: 100%;
      height: 1px;
      background: #ddd;
      position: absolute;
      left: 0;
      bottom: 0;
      transform: scaleY(0.5);
      transform-origin: bottom;
    }
  }
  .pro-img {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    .active-msg {
      background: #ff4242;
      border-top-right-radius: 50px;
      position: absolute;
      bottom: 0;
      color: #fff;
      font-size: 16px;
      padding: 10px 25px 10px 15px;
      left: 0;
      z-index: 99;
    }
    .img-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      .swiper-container {
        width: 100%;
        height: 100%;
        .swiper-slide {
          background: #fff url('../assets/img/loading-gene-s.gif') center no-repeat;
          background-size: 50px;
        }
      }
      img {
        width: 100%;
      }
    }
  }
  .pro-title {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
    border-bottom: 8px solid #eee;
    h2 {
      font-size: 20px;
      color: #000;
      margin-top: 4px;
      line-height: 24px;
    }
    p {
      font-size: 14px;
      color: #555;
      line-height: 18px;
      margin-top: 2px;
    }
    .price {
      width: 100%;
      font-size: 14px;
      overflow: hidden;
      margin-top: 10px;
      color: #666;
      .left {
        float: left;
        p {
          span {
            text-decoration: line-through;
          }
        }
        h3 {
          font-size: 32px;
          color: #ff7302;
          float: left;
          span {
            font-size: 18px;
            position: relative;
            top: -8px;
          }
          i {
            font-size: 18px;
          }
        }
        p {
          float: left;
          margin-top: 12px;
          margin-left: 8px;
        }
      }
      .right {
        float: right;
        p {
          margin-top: 12px;
        }
      }
    }
  }
  .pro-msg {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px;
    text-align: left;
    font-size: 14px;
    color: #555;
    overflow: hidden;
    border-bottom: 8px solid #eee;
    ul li {
      width: 100%;
      float: left;
      padding: 5px 0;
      line-height: 18px;
      position: relative;
      .link-more {
        position: absolute;
        width: 32px;
        height: 24px;
        right: 0;
        top: 3px;
        span.norem {
          width: 4px;
          height: 4px;
          display: block;
          border-radius: 6px;
          margin-right: 3px;
          background: #88c5e5;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      p.msg-name {
        float: left;
        width: 72px;
        white-space: nowrap;
      }
      .msg-main p.msg-lists {
        display: inline-block;
        width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cuxiao-box {
        float: left;
        .cuxiao-main {
          color: #d00000;
          border-radius: 3px;
          position: relative;
          margin-bottom: 8px;
          &:last-child {
            margin-bottom: 0;
          }
          p.cuxiao-title {
            border: 1px solid #d00000;
            line-height: 15px;
            padding-left: 4px;
            text-align: center;
            display: inline-block;
            border-radius: 3px;
            span {
              height: 100%;
              padding-left: 6px;
              line-height: 21px;
              padding-right: 6px;
              margin-left: 4px;
              display: inline-block;
              background: #d00000;
              color: #fff;
              img {
                height: 14px;
                position: relative;
                top: 2px;
              }
            }
            &.quan-title {
              color: #fe9402;
              border: 1px solid #fe9402;
              span {
                background: #fe9402;
              }
            }
            &.cuxiaoa-title {
              color: #38b035;
              border: 1px solid #38b035;
              span {
                background: #38b035;
              }
            }
          }
          .cuxiao-desc {
            line-height: 18px;
            padding-top: 5px;
          }
          .quan-desc {
            color: #999;
          }
        }
        .yh-quan {
          float: left;
          .quan-title {
            img {
              height: 24px;
              position: relative;
              top: 6px;
            }
            span {
              display: inline-block;
              color: #d00000;
              padding-left: 4px;
              line-height: 20px;
              padding-right: 4px;
              margin-left: 4px;
              border-radius: 4px;
            }
          }
        }
      }
      .pay-path {
        float: left;
        width: calc(100% - 72px);
        p {
          float: left;
          margin-right: 4px;
          position: relative;
          &::before {
            width: 18px;
            height: 18px;
            display: block;
            content: '';
            top: 0;
            left: 0;
            position: absolute;
          }
          &.pay-0 {
            padding-left: 0;
            &::before {
              display: none;
            }
          }
          &.pay-1 {
            padding-left: 19px;
            &::before {
              background: url('../assets/img/icon-wx01.png');
              background-size: 80%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
          &.pay-2 {
            padding-left: 19px;
            &::before {
              background: url('../assets/img/icon-zfb01.png');
              background-size: 80%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
          &.pay-3 {
            padding-left: 19px;
            &::before {
              background: url('../assets/img/icon-hdb01.png');
              background-size: 80%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
          &.pay-4 {
            padding-left: 19px;
            &::before {
              background: url('../assets/img/icon-cash01.png');
              background-size: 80%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
          &.pay-5 {
            padding-left: 19px;
            &::before {
              background: url('../assets/img/icon-card.png');
              background-size: 80%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .msg-main {
        span {
          margin-right: 6px;
        }
      }
    }
  }
  .pro-service {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px;
    text-align: left;
    font-size: 14px;
    color: #555;
    overflow: hidden;
    ul li {
      width: 100%;
      float: left;
      padding: 3px 0;
      height: 24px;
      line-height: 24px;
      position: relative;
      p {
        float: left;
        &.msg-name {
          margin-right: 6px;
        }
        &.red {
          color: #d00000;
        }
      }
    }
  }
  .pro-detail {
    width: 100%;
    overflow: hidden;
    .pro-detail-title {
      width: 100%;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      font-size: 16px;
      padding: 12px 0;
    }
    .pro-detail-content {
      width: 100%;
      padding-top: 18px;
      padding-bottom: 18px;
      img {
        width: 100%;
        min-height: 100px;
        background: url('../assets/img/gb-loading.gif') center no-repeat;
        float: left;
      }
    }
  }
}
</style>
